<!DOCTYPE html>
<html>
<head lang="en">
    <meta charset="UTF-8">
    <title>省份城市的三级联动</title>
</head>
<body>
<from>
    <select id="province">
        <option value="-1">请选择</option>
    </select>
    <select  id="city"></select>
    <select  id="country"></select>
</from>
    <script>
//省级数组
var provinceArr=['上海','江苏','湖南'];
//城市数组
var cityArr = [
    ['上海市'],
    ['苏州市', '南京市', '扬州市'],
    ['长沙市', '娄底市', '邵阳市', '衡阳市']
];
//区域数组
var  countryArr = [
    [
        ['黄埔区', '静安区', '长宁区', '浦东区']
    ],[
        ['虎丘区','吴中区','相城区','姑苏区','吴江区'],
        ['玄武区','秦淮区','建邺区','鼓楼区','浦口区'],
        ['邗江区','广陵区','江都区'],
    ],[
        ['天心区','岳麓区','芙蓉区','开福区','雨花区','望城区'],
        ['双峰县','新化县','娄星区','涟源市','冷水江市'],
        ['大祥区','北塔区','双清区','邵阳县'],
        ['南岳区','珠晖区','雁峰区','石鼓区']
    ]
];
function createOption(obj,data){
    for(var i in data){
        var op=new Option(data[i],i);
        obj.options.add(op);
    }
}
var province=document.getElementById('province');
createOption(province,provinceArr);

var city=document.getElementById('city');
province.onchange=function()
{
    city.options.length=0;
    createOption(city,cityArr[province.value]);
    if(province.value>=0)
    {
        city.onchange();
    }
    else{
        country.options.length=0;
    }
};

var country = document.getElementById('country');
city.onchange = function() {
    country.options.length = 0;     // 清空country下的所有原有<option>
    createOption(country, countryArr[province.value][city.value]);
};
</script>
</body>
</html>